<template>
    <div id="userInfoPage">
        <!-- <van-cell style="margin: 28px; padding: 0;width: auto; text-align: left;" title="头像" is-link @click="toEdite('avatarUrl',user.avatarUrl,'头像')">
            <img :src="user.avatarUrl"/>
        </van-cell> -->
        <van-cell style="margin: 28px; padding: 0;width: auto; text-align: left;" title="昵称" is-link :value="user.nickName" @click="toEdite('nickName',user.nickName,'昵称')" />
        <van-cell style="margin: 28px; padding: 0;width: auto; text-align: left;" title="账号" :value="user.userAccount" />
        <van-cell style="margin: 28px; padding: 0;width: auto; text-align: left;" title="个人简介" is-link :value="user.profile" @click="toEdite('profile',user.profile,'个人简介')" />
        <van-cell style="margin: 28px; padding: 0;width: auto; text-align: left;" title="个人标签">
            <van-row gutter="20" style="padding: 0 16px;">
                <van-col v-for="tag in user.tags" :key="tag"  >
                    <van-tag round type="primary">{{ tag }}</van-tag>
                </van-col>
            </van-row>
            
        </van-cell>
        <van-cell style="margin: 28px; padding: 0;width: auto; text-align: left;" title="邮箱" is-link :value="user.userEmail" @click="toEdite('userEmail',user.userEmail,'邮箱')" />
        <van-cell style="margin: 28px; padding: 0;width: auto; text-align: left;" title="创建时间" :value="user.createTime" />
    </div>
</template>

<style scoped>
</style>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import Myaxios from '../plugins/MyAxios';

const user = ref({})
const router = useRouter()

onMounted(()=>{
    getUser()
})

const getUser = async ()=>{
    const res = await Myaxios.post("/currentUser");
    if(res.data.code === 402){
        router.push({
            path: '/login',
        });
    }
    if(res.data.code === 200){
        user.value = res.data.data
    }
}

const toEdite = (editeKey,editeVal,editeName)=>{
    router.push({
        path: '/user/edite',
        query:{
            userId: user.value.id,
            editeKey,
            editeVal,
            editeName
        }
    })
}


</script>